import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h
  } from "snabbdom";
  
  const patch = init([
    // Init patch function with chosen modules
    classModule, // makes it easy to toggle classes
    propsModule, // for setting properties on DOM elements
    styleModule, // handles styling on elements with support for animations
    eventListenersModule, // attaches event listeners
  ]);
  const container = document.getElementById('container')
  const btn = document.getElementById('btn')
  const vnode1 = h('ul', {}, [
    h('li', {key: 'A'}, 'A'),
    h('li', {key: 'B'}, 'B'),
    h('li', {key: 'C'}, 'C'),
    h('li', {key: 'D'}, 'D')
  ])
  const vnode2 = h('ul', {}, [
    h('li', {key: 'E'}, 'E'),
    h('li', {key: 'A'}, 'A'),
    h('li', {key: 'B'}, 'B'),
    h('li', {key: 'C'}, 'C'),
    h('li', {key: 'D'}, 'D')    
])

/**
 * 1. key是节点的唯一标识，通过key，diff可以知道更改前后它们是否为同一个节点
 * 2. 选择器且key相同则视为同一节点，diff会对新旧dom进行精细化比较，然后做最小量更新
 * 如果非同一节点，则直接替换节点，而不再进行精细化更新（vue实际开发中修改节点的场景几乎没有）
 * 3. diff只进行同层比较，不会进行跨层比较，会删除旧的，替换新的（vue实际开发中跨层的场景几乎没有）
 */
patch(container, vnode1);

btn.onclick = () => {
    patch(vnode1, vnode2)
}